<template>
    <Header></Header>
    <div class="container mx-auto max-w-screen-xl mt-5 mb-10">
        <div class="grid grid-cols-1">
            <!-- 主体内容 -->
                <!-- 页面标题 -->
                <div class="mb-12 text-center">
                    <h1 class="text-3xl md:text-4xl font-bold mb-4">归档</h1>
                    <p class="text-gray-600 dark:text-gray-400">少年不惧岁月长--------彼方尚有荣光在</p>
                </div>
                
                <!-- 归档列表容器 -->
                <div class="py-4">
                    <!-- 按年份分组显示文章 -->
                    <div v-for="(yearArticles, year) in articlesByYear" :key="year">
                        <!-- 年份标题 -->
                        <div class="mb-6 mt-12 first:mt-0">
                            <h2 class="text-2xl font-bold inline-block pb-1 border-b-2 border-blue-500 dark:border-blue-400">{{ year }}</h2>
                        </div>
                        <!-- 年份下的文章列表 -->
                        <ul class="space-y-4">
                            <li v-for="article in yearArticles" :key="article.id" class="group">
                                <div class="flex items-start hover:bg-gray-50 dark:hover:bg-gray-800/50 p-2 rounded-lg transition-colors duration-200">
                                    <!-- 日期和图标 -->
                                    <div class="flex-shrink-0 mr-4 mt-1">
                                        <div class="flex items-center">
                                            <!-- 日期 -->
                                            <span class="text-sm text-gray-500 dark:text-gray-400 mr-2 whitespace-nowrap">
                                                {{ formatMonthDay(article.createTime) }}
                                            </span>
                                            <!-- 统一的图标 -->
                                         <svg t="1758273845138" class="icon w-4 h-4" viewBox="0 0 1338 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5771" width="200" height="200"><path d="M668.616991 1023.449118a511.927008 511.927008 0 1 1 532.309652-511.533521 522.826607 522.826607 0 0 1-532.309652 511.533521z m0-961.05344a449.874057 449.874057 0 1 0 467.974474 449.519919A459.435799 459.435799 0 0 0 668.616991 62.395678z m206.226707 696.905399a155.112703 155.112703 0 1 1 161.329802-154.994656 158.417997 158.417997 0 0 1-161.329802 154.994656z m0-247.897014a93.099101 93.099101 0 1 0 96.797881 93.020404 95.105886 95.105886 0 0 0-96.797881-93.13845z m-310.658242-289.842762a24.120773 24.120773 0 0 1-22.507475-14.795124 22.940311 22.940311 0 0 1 13.693359-30.10178 430.632527 430.632527 0 0 1 61.029884-17.903673 24.238819 24.238819 0 0 1 28.881969 17.628232 23.255101 23.255101 0 0 1-18.336509 27.544113 381.879448 381.879448 0 0 0-53.947112 15.739493 24.592958 24.592958 0 0 1-8.814116 1.613298zM320.538105 503.219527a25.852117 25.852117 0 0 1-4.564453-0.393487 23.373147 23.373147 0 0 1-19.24153-27.189974 404.347574 404.347574 0 0 1 179.272825-259.1901 24.789701 24.789701 0 0 1 33.564468 6.453192 22.704219 22.704219 0 0 1-6.728633 32.226612 357.719326 357.719326 0 0 0-158.575391 229.206366 23.924029 23.924029 0 0 1-23.727286 18.769345z m695.528193 105.651347l-28.921318-55.403016c188.204987-90.777526 304.598537-201.937695 283.074781-270.404488-16.014934-50.799213-112.301282-82.632338-251.281005-82.632338V138.417429c176.085577 0.354139 287.245746 45.408437 312.861771 126.899662 33.013586 103.762607-85.032611 232.236218-315.734229 343.435736z m-695.449496 169.199549q-26.442348 0-51.468142-1.377206C121.945053 768.548029 28.216372 724.005264 5.276061 651.131412c-23.255101-73.857571 30.652663-162.116777 151.80741-248.408547l38.404362 49.815495c-94.791096 67.522425-142.79655 135.044849-128.434262 180.65003 14.086846 44.739509 91.013618 75.274125 205.79387 81.569922a1428.358985 1428.358985 0 0 0 456.445296-63.548202q13.929451-3.934873 27.544112-8.263234l19.674367 59.023098q-14.244241 4.367709-28.606529 8.578024a1578.710491 1578.710491 0 0 1-427.287885 67.246984z" fill="#1296db" p-id="5772"></path></svg>
                                        </div>
                                    </div>
    
                                    <!-- 文章标题 -->
                                    <div class="flex-grow">
                                        <div class="flex flex-col sm:flex-row sm:items-center justify-between">
                                            <!-- 文章标题 -->
                                            <a href="javascript:void(0)" 
                                               @click="goArticleDetail(article.id)"
                                               class="text-lg dark:hover:text-blue-400 transition-colors duration-200 group-hover:ml-1 selection:text-orange-500 dark:selection:text-orange-400">
                                                {{ article.title }}
                                            </a>
                                            <!-- 文章标签， -->
                                            <span class="mt-1 sm:mt-0 text-sm px-3 py-0.5 rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400 transition-all duration-200 hover:scale-105">
                                                文章/Airs专属
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <!-- 分页 -->
                    <nav aria-label="Page navigation example" v-if="total > 0" class="mt-12">
                        <ul class="flex items-center justify-center -space-x-px h-10 text-base">
                            <li v-for="page in pageNumbers" :key="page">
                                <a @click="getArchiveList(page)"
                                    class="flex items-center border-gray-300 justify-center px-4 h-10 leading-tight bg-white border dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                    :class="[page == current ? 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700' : 'text-gray-500  hover:bg-gray-100 hover:text-gray-700']"
                                    >
                                    {{ page }}
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
 
    <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
import { useRouter } from 'vue-router'
import { getArchives } from '@/api/frontend/archive'
import { ref, computed } from 'vue'

const router = useRouter()

const goArticleDetail = (articleId) => {
    router.push({ path: '/article/detail', query: { articleId: articleId } })
}

const archives = ref([])
// 当前页码
const current = ref(1)
const total = ref(0)
const size = ref(20) 
const totalPages = ref(0)

// 生成页码数组
const pageNumbers = computed(() => {
    const arr = []
    for (let i = 1; i <= totalPages.value; i++) {
        arr.push(i)
    }
    return arr
})

// 格式化日期显示
const formatDate = (dateStr) => {
    const date = new Date(dateStr)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
}

// 只格式化月日
const formatMonthDay = (dateStr) => {
    const date = new Date(dateStr)
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${month}.${day}`
}



// 按年份分组文章
const articlesByYear = computed(() => {
    const grouped = {}
    
    // 提取所有文章
    let allArticles = []
    archives.value.forEach(archive => {
        if (archive.articles && Array.isArray(archive.articles)) {
            allArticles = allArticles.concat(archive.articles)
        }
    })
    
    // 按时间排序（最新的在前）
    allArticles.sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
    
    // 按年份分组
    allArticles.forEach(article => {
        const year = new Date(article.createTime).getFullYear()
        if (!grouped[year]) {
            grouped[year] = []
        }
        grouped[year].push(article)
    })
    
    return grouped
})

// 获取分页数据
function getArchiveList(currentPage) {
    getArchives({ current: currentPage, size: size.value })
        .then((res) => {
            if (res.success == true) {
                archives.value = res.data
                current.value = res.current
                total.value = res.total
                size.value = res.size
                totalPages.value = res.pages
            }
        })
}

// 初始加载数据
getArchiveList(current.value)

</script>

<style scoped>
/* 归档列表样式 */

/* 动画效果 */
.group {
    transition: all 0.3s ease;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .mb-12 {
        margin-bottom: 8rem !important;
    }
    
    .text-3xl {
        font-size: 2.5rem !important;
    }
    
    .text-lg {
        font-size: 1.1rem !important;
    }
    
    /* 选中文字的样式 */
    ::selection {
        color: #f97316 !important;
        background-color: rgba(249, 115, 22, 0.1);
    }
    
    .dark ::selection {
        color: #fb923c !important;
        background-color: rgba(251, 146, 60, 0.1);
    }
    
    .flex-shrink-0 {
        min-width: 70px;
    }
}
</style>
